<template>
  <div class="app">
    <layout-header></layout-header>
    <div class="content">
      <layout-nav v-if="hasNav" :navList="navList"></layout-nav>
      <div class="noNavView" v-else>
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import {computed, ref} from "vue";
import LayoutHeader from "@/components/LayoutHeader";
import router from "../router";
import LayoutNav from "../components/LayoutNav";

let menu_list = JSON.parse(localStorage.getItem('menu_list')) ? JSON.parse(localStorage.getItem('menu_list')): []
const hasNav = computed(()=>{
  let flg = menu_list.length > 0 && menu_list.filter((item) => {
    return router.currentRoute.value.path.includes(item.path)
  })[0]?.children
  return !_.isEmpty(flg)
})
const navList = computed(()=>{
  let flg = menu_list.length > 0 && menu_list.filter((item) => {
    return router.currentRoute.value.path.includes(item.path)
  })[0].children
  return flg
})
</script>
<style scoped lang="less">
.app {
  width: 100%;
  height: 100%;
  min-width: 1050px;
  overflow: auto;
  .content {
    width: 100%;
    height: calc(100% - 47px);
    .noNavView {
      width: 100%;
      height: 100%;
      overflow: auto;
      padding: 16px;
    }
  }
}
</style>
